<template>
  <div class="refillView">
    <my-header name-page="Balance" :btn-active="true" />
    <div class="refillView__block">
      <h3 class="refillView__block__welcome">Выберите сумму пополнения</h3>
      <div class="refillView__block__amounts">
        <div class="checkbox__box">
          <input
            type="checkbox"
            class="checkbox"
            v-model="isChecked1"
            @change="handleCheckboxChange(100)"
          />
          <p class="checkbox__label">100$</p>
        </div>
        <div class="checkbox__box">
          <input
            type="checkbox"
            class="checkbox"
            v-model="isChecked2"
            @change="handleCheckboxChange(500)"
          />
          <p class="checkbox__label">500$</p>
        </div>
        <div class="checkbox__box">
          <input
            type="checkbox"
            class="checkbox"
            v-model="isChecked3"
            @change="handleCheckboxChange(1000)"
          />
          <p class="checkbox__label">1000$</p>
        </div>
      </div>
      <button @click="send" class="button">Провести операцию</button>
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/UI/MyHeader.vue";
import RefillService from "@/components/RefillService.ts";

export default {
  name: "RefillBalancePage",
  components: { MyHeader },
  data() {
    return {
      isChecked1: false,
      isChecked2: false,
      isChecked3: false,
      activeCheckbox: null,
      activeAmount: 0,
    };
  },
  methods: {
    handleCheckboxChange(id) {
      if (this.activeCheckbox !== null && this.activeCheckbox !== id) {
        this["isChecked" + this.activeCheckbox] = false;
      }
      this.activeCheckbox = id;
      this.activeAmount = id;
    },
    send() {
      if (this.activeCheckbox !== null) {
        RefillService.send(
          window.Telegram.WebApp.initDataUnsafe.user.id,
          this.activeAmount
        )
          .then((res) => {
            console.log(res);
            window.Telegram.WebApp.close();
          })
          .catch((error) => alert(error));
      }
    },
  },
};
</script>

<style scoped>
.refillView {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.refillView__block {
  margin-top: 20%;
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.refillView__block__welcome {
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
  font-size: 17px;
}

.refillView__block__amounts {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.checkbox__box {
  margin-top: 10%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.checkbox {
  transform: scale(1.2);
}

.checkbox__label {
  margin-left: 5%;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
  font-size: 14px;
}

.button {
  background-color: var(--tg-theme-button-color);
  color: var(--tg-theme-button-text-color);
  height: 40px;
  width: 50%;
  margin-top: 20px;
  border-radius: 12px;
  outline: none;
}
</style>